<template>
    <el-card>
      <div class="search-query">
        <el-form :inline="true" :model="searchForm" ref="searchFormRef">
          <el-form-item label="用户名" prop="username">
            <el-input
              v-model="searchForm.username"
              placeholder="请输入用户名"
              clearable
            />
          </el-form-item>
          <el-form-item label="登录时间" prop="loginTime">
            <el-date-picker
        v-model="searchForm.loginTime"
        type="daterange"
        range-separator="-"
        start-placeholder="开始时间"
        end-placeholder="结果时间"
        value-format="YYYY-MM-DD"
      />
          </el-form-item>
  
          <el-form-item>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button @click="handleSearchReset(searchFormRef)">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
  
      <div class="table-btn">
        <el-space :size="10">
          <el-button type="danger" @click="handleBatchDelete">批量删除</el-button>
        </el-space>
  
        <el-button type="primary" @click="handleReflesh">刷新</el-button>
      </div>
  
      <el-table
        border
        :data="userLoginLogData.list"
        v-loading="loading"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="username" label="用户名" />
       
        <el-table-column prop="loginTime" label="登录时间" width="180"/>
        <el-table-column prop="ipAddress" label="登录ip" />
        <el-table-column prop="userAgent" label="浏览器/设备信息" show-overflow-tooltip/>
        <el-table-column prop="deviceType" label="设备类型" />
        <el-table-column prop="sessionId" label="会话ID" show-overflow-tooltip />
        <el-table-column prop="location" label="地理位置" />
        <el-table-column prop="country" label="国家" />
        <el-table-column prop="proviceId" label="省份" />
        <el-table-column prop="cityId" label="城市" />
        <el-table-column fixed="right" label="操作">
          <template v-slot="scope" #default>
            <el-button type="danger" @click="handleDelete(scope.row)" link
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
      
        v-model:current-page="userLoginLogData.currentPage"
        v-model:page-size="userLoginLogData.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        background="background"
        layout="total, sizes, prev, pager, next,jumper"
        :total="userLoginLogData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </template>
  <script setup lang="js">
  
  import { ref,onMounted } from 'vue'
  import userLoginLog from '@/services/userLoginLog'
  import { ElMessage } from 'element-plus'
  
  const loading = ref(false)
  const userLoginLogData = ref({
      currentPage: 1,
      pageSize: 10,
      total: 0,
      list: []
  })
  
  
  const init = async () => {
      loading.value = true
      const res = await userLoginLog.page({})
      if(res.code == 200) {
        userLoginLogData.value = res.data
        loading.value = false
      }
  }
  
  onMounted(()=>{
      init()
  })
  
  const handleDelete = async (row) => {
      const res = await userLoginLog.deleteByIds([row.id])
      if (res.code === 200) {
          init()
          ElMessage({
              type: 'success',
              message: res.msg
          })
      }
  }
  
  let ids = []
  const handleSelectionChange =  (value) => {
      ids = []
      value.forEach(e => {
          ids.push(e.id)
      });
  }
  
  const handleBatchDelete = async () => {
      if(ids.length == 0) {
          throw ElMessage({
              type: 'warning',
              message: "请选择"
          })
      }
      const res = await userLoginLog.deleteByIds(ids)
      if (res.code === 200) {
          init()
          ElMessage({
              type: 'success',
              message: res.msg
          })
      }
  }
  
  const handleReflesh = () => {
      init()
  }
  
  const searchFormRef = ref()
  const searchForm = ref({
      username: '',
      loginTime: []
  })
  // 搜素
  const handleSearch = async () => {
      loading.value = true
      const loginTime = searchForm.value.loginTime
      const data = {
        username: searchForm.value.username,
        loginTimeStart: '',
        loginTimeEnd: ''
      }

      if(loginTime?.length>0) {
        data.loginTimeStart = loginTime[0]
        data.loginTimeEnd = loginTime[1]
      }

      const res = await userLoginLog.page(data)
      if (res.code === 200) {
          userLoginLogData.value = res.data
          loading.value = false
      }
  }
  // 搜索重置
  const handleSearchReset = (formRef) => {
      formRef.resetFields()
  }
  
  // 当前页大小
  const handleSizeChange = async (pageSize) => {
      loading.value = true
      const loginTime = searchForm.value.loginTime
      const data = {
        name: searchForm.value.name,
        loginTimeStart: '',
        loginTimeEnd: '',
        pageSize
      }

      if(loginTime?.length>0) {
        data.loginTimeStart = loginTime[0]
        data.loginTimeEnd = loginTime[1]
      }
      const res = await userLoginLog.page(data)
      if (res.code === 200) {
        userLoginLogData.value = res.data
          loading.value = false
      }
  }
  
  // 当前页数
  const handleCurrentChange = async (currentPage) => {
      loading.value = true
      const loginTime = searchForm.value.loginTime
      const data = {
        name: searchForm.value.name,
        loginTimeStart: '',
        loginTimeEnd: '',
        currentPage
      }
      if(loginTime?.length>0) {
        data.loginTimeStart = loginTime[0]
        data.loginTimeEnd = loginTime[1]
      }
      const res = await userLoginLog.page(data)
      if (res.code === 200) {
        userLoginLogData.value = res.data
          loading.value = false
      }
  }
  
  
  </script>
  
  <style lang="less" scoped>
  .table-btn {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
  }
  </style>
  